<!-- TextBox.vue -->
<template>
  <div class="container">
    <div class="head_container">
      <div class="id_container">ID:{{ id }}</div>
      <div class="text_container">章节</div>
    </div>
    <div class="rich_text_container">
      <span style="width: 72px;height: 24px;color: #c4c4c4;padding-top: 12px">章节选项</span>
      <div class="selected_container">
        <div class="mb-2 flex items-center text-sm">
          <el-radio-group v-model="chapterRadio1" class="ml-8" @change="handleChange">
            <el-radio value="1" size="large">下一章节</el-radio>
            <el-radio value="2" size="large">解锁章节</el-radio>
          </el-radio-group>
        </div>
      </div>
    </div>
    <div class="chapterSelectContainer" >
      <div class="chapterSelectContext">
        <span style="width: 72px;height: 24px;color: #c4c4c4;padding-top: 12px">
        章节选择</span>
      </div>
      <div>
        <el-select v-model="chapterValue" multiple=true placeholder="请选择章节" class="chapterValueContainer" @change="handleSelectChange">
          <el-option
            v-for="item in chapterOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          />
        </el-select>
      </div>
    </div>
    <div class="next_step" v-show="chapterRadio1==='2'"><span style="width: 72px;height: 24px;color: #c4c4c4;padding-top: 12px" >下一步</span>
      <div style="padding-left: 50px">
        <input class="input_container" v-model="nextStep"></input>
      </div>
    </div>

    <button class="saveButton" @click="handleSave()">保存</button>
  </div>
</template>

<script lang="ts">
import {defineComponent, onMounted, PropType, watch} from 'vue';
import {ref} from 'vue'
import {useDirectoryStore} from "@/store/modules/directory";
import {useRouter, useRoute} from "vue-router";

export default defineComponent({
  name: 'ChapterEditor',
  props: {
    id: {
      type: String as PropType<string>,
      default: "0000"
    },
    valueFromParent: {
      type: Object as PropType<Object>,
      required: true,
      default: {
        moduleValue: {
          value:'1',
          nextChapter:1
        },
        moduleNext:''
      }
    },
  },
  emits: ['save'], // 定义自定义事件
  setup(props, {emit}) {
    const chapterRadio1 = ref(props.valueFromParent.moduleValue.value||'1')
    const chapterOptions = ref([])
    const chapterValue = ref(props.valueFromParent.moduleValue.nextChapter||1)
    const directoryStore = useDirectoryStore()
    const route = useRoute()
    const chapterId = ref(1);
    // 内容 HTML
    const defaultNextId = props.id.split("-")[0]+"-"+ (Number(props.id.split("-")[1])+1)
    const nextStep = ref(props.valueFromParent?.moduleNext?props.valueFromParent?.moduleNext:defaultNextId)

    const handleSave = () => {
      if(chapterRadio1.value==='1'){
      //   1 代表下一章节, 选择哪个章节就可以
        props.valueFromParent.moduleValue.value = chapterRadio1.value
        props.valueFromParent.moduleValue.nextChapter = chapterValue.value
        props.valueFromParent.moduleValue.nextChapterName = chapterOptions.value[chapterValue.value-1].label
        props.valueFromParent.moduleValue.directoryId = chapterOptions.value[chapterValue.value-1].id
        props.valueFromParent.moduleNext = ""
      }
      if(chapterRadio1.value==='2'){
 
      //   2 代表的是解锁章节
        props.valueFromParent.moduleNext = nextStep.value
        props.valueFromParent.moduleValue.value = chapterRadio1.value
        props.valueFromParent.moduleValue.nextChapter = chapterValue.value
        
        let showName = "";
        let batchUnlockDirectoryIds = [];
        chapterValue.value.forEach(x => {
          showName  = showName +  chapterOptions.value[x-1].label + "";
          batchUnlockDirectoryIds.push(chapterOptions.value[x-1].id) 
        });
        props.valueFromParent.moduleValue.nextChapterName = showName
        props.valueFromParent.moduleValue.directoryId = batchUnlockDirectoryIds
      }

      const updatedContent = {...props.valueFromParent};
      emit('save', updatedContent); // 触发save事件并传递
    };



    const handleChange = ()=>{
    }

    const handleSelectChange = (value)=>{
      
    }



    onMounted(() => {
      chapterId.value = Number(route.query.chapterId)
      if (isNaN(chapterId.value)) {
        chapterId.value = 1
      }

      //   获取章节的列表
      chapterOptions.value =directoryStore.directoryList
      chapterOptions.value.forEach(item=>{
        delete item.disabled
      })

      chapterOptions.value.forEach(item => {
        item.value = item.sort
        if (item.sort === chapterId.value) {
          item.disabled = true
        }
      })
    })
    watch(()=>props.valueFromParent,(newVal)=>{
      chapterRadio1.value =  newVal.moduleValue.value
      chapterValue.value = newVal.moduleValue.nextChapter
      nextStep.value =  newVal?.moduleNext
    },{deep:true})

    return {
      nextStep,
      handleSave,
      chapterRadio1,
      chapterValue,
      chapterOptions,
      handleChange,
      handleSelectChange
    };
  }
});
</script>
<style>

.el-radio__input.is-checked .el-radio__inner {
  background: #ff8d1a !important;
  border-color: #ff8d1a !important;
}

/* 如果你还想要改变文字的颜色，可以加入以下代码 */
.el-radio__input.is-checked + .el-radio__label {
  color: #fff; /* 选中时的文字颜色 */
}


</style>



<style scoped>

.chapterValueContainer {
  width: 544px;
  padding-left: 50px;
  height: 50px;
}

.chapterSelectContext {
  left: 64px;
  top: 208.5px;
  width: 72px;
  height: 24px;
  opacity: 1;
  /** 文本1 */
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0px;
  line-height: 23.87px;
  color: rgba(229, 229, 229, 1);
  text-align: left;
  vertical-align: top;
  margin-left: 66.5px;
}
:deep(.el-select__wrapper){
  width: 544px;
  height: 50px;
  border-radius: 10px;
  background: rgba(35, 35, 35, 1)!important;
}
:deep(.el-select__placeholder){
  font-size: 16.18px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 24.27px;
  color: rgba(229, 229, 229, 1);
  text-align: left;
  vertical-align: top;
}

:deep(.el-select-dropdown__wrap) {
  background-color: cadetblue!important;
}



.chapterSelectContainer {
  display: flex;
}

.input_container {
  left: 200px;
  top: 195px;
  width: 544px;
  height: 50px;
  opacity: 1;
  border-radius: 10px;
  background: #232323;
}

.selected_container {
  left: 200px;
  top: 115px;
  width: 544px;
  height: 50px;
  opacity: 1;
  border-radius: 10px;
  background: rgba(35, 35, 35, 1);
  margin-left: 50px;
}

.rich_text_container {
  display: flex;
  width: 680px;
  height: 119px;
  margin-left: 66.5px;
  margin-top: 10px;
}

.next_step {
  display: flex;
  margin-left: 66.5px;
  margin-top: 30px;
  color: #c4c4c4;
}

.head_container {
  width: 811px;
  height: 55px;
  background-color: #525252;
  display: flex;
  align-items: center;

  .id_container {
    width: 75px;
    height: 25px;
    color: #a3a3a3;
    margin-left: 20px;
    margin-right: 298.5px;
  }

  .text_container {
    width: 44px;
    height: 30px;
  }
}

.container {
  width: 811px;
  height: 644.7px;
  background-color: #383838;
}

textarea {
  width: 100%;
  box-sizing: border-box;
}

.saveButton {
  height: 60px;
  width: 671px;
  background-color: #ff8d1a;
  color: #78491b;
  margin-left: 66.5px;
  margin-top: 200px;
  border-radius: 10px;
}

html.dark {
  --w-e-textarea-bg-color: #333;
  --w-e-textarea-color: #fff;
}


button {
  background-color: #ff8d1a;
  border: none;
  padding: 10px 20px;
  color: white;
  cursor: pointer;
  border-radius: 4px;
  margin-top: 10px;
}

button:hover {
  background-color: #e67e22;
}

</style>
